<template>
	<view class="page">
		<u-navbar
			autoBack
			fixed
			placeholder
			titleStyle="color: #232832"
			leftIconColor="#232832"
			bgColor="#FFFFFF"></u-navbar>
		<c-content
			:top="statusBarHeight + 44"
			bgColor="#F4F4F7">
			<view class="avatar">
				<u-avatar
					:src="avatar"
					:size="96"
					@click="showList = true"></u-avatar>
			</view>
			<view class="cell-group">
				<view class="cell">
					<view class="cell-label">昵称</view>
					<view class="cell-input">
						<u-input
							v-model="nickname"
							border="none"
							color="#232832"
							inputAlign="right"></u-input>
					</view>
					<view class="cell-value">
						<u-icon
							name="arrow-right"
							:size="16"
							color="#232832"></u-icon>
					</view>
				</view>
				<view class="cell">
					<view class="cell-label">性别</view>
					<view
						class="cell-input"
						@click="sexPicker = true">
						{{ sex }}
					</view>
					<view class="cell-value">
						<u-icon
							name="arrow-right"
							:size="16"
							color="#232832"></u-icon>
					</view>
				</view>
				<view class="cell">
					<view class="cell-label">生日</view>
					<view
						class="cell-input"
						@click="birthPicker = true">
						{{ birth }}
					</view>
					<view class="cell-value">
						<u-icon
							name="arrow-right"
							:size="16"
							color="#232832"></u-icon>
					</view>
				</view>
			</view>
			<view class="signature">
				<textarea
					class="textarea"
					v-model="signature"
					maxlength="100"
					placeholder="简单介绍一下自己吧"
					:show-confirm-bar="false"
					:adjust-position="false"
					placeholderStyle="color: #666666" />
			</view>

			<view
				class="btn"
				:style="{ bottom: `${safeAreaBottom}px` }">
				保存
			</view>
		</c-content>

		<u-picker
			:show="sexPicker"
			:columns="sexs"
			@confirm="setSex"
			@cancel="sexPicker = false" />
		<u-datetime-picker
			:show="birthPicker"
			:minDate="0"
			:maxDate="maxDate"
			v-model="birthVal"
			mode="date"
			@cancel="birthPicker = false"
			@confirm="setBirth" />

		<u-action-sheet
			:actions="actions"
			@select="selectClick"
			:show="showList"
			closeOnClickOverlay
			cancelText="取消"
			safeAreaInsetBottom
			@close="showList = false" />
	</view>
</template>

<script>
import moment from '@/common/moment.js'
import mixins from '@/mixins/index.js'
export default {
	mixins: [mixins],
	data() {
		return {
			avatar: '',
			nickname: '',
			sex: '',
			birth: '',
			birthVal: new Date().getTime(),
			signature: '',
			sexPicker: false,
			birthPicker: false,
			sexs: [['保密', '男', '女']],
			maxDate: new Date().getTime(),
			showList: false,
			actions: [
				{
					name: '拍照',
					type: '1'
				},
				{
					name: '相册图片',
					type: '2'
				},
				{
					name: '查看头像',
					type: '3'
				},
				{
					name: '系统头像',
					type: '4'
				}
			]
		}
	},
	created() {
		this.avatar = this.$FILE_URL + uni.$store.get('avatar')
		this.nickname = uni.$store.get('nickname')
		this.birth = uni.$store.get('birth')
		const sex = uni.$store.get('sex')
		if (sex == '1') {
			this.sex = '男'
		} else if (sex == '0') {
			this.sex = '女'
		} else {
			this.sex = '保密'
		}
		this.birthVal = new Date(this.birth).getTime()
		this.signature = uni.$store.get('signature')
	},
	methods: {
		setSex(val) {
			this.sex = val.value[0]
			this.sexPicker = false
		},
		setBirth(val) {
			this.birth = moment(new Date(val.value)).format('YYYY-MM-DD')
			this.birthPicker = false
		},
		selectClick(item) {
			console.log(item);
		}
	}
}
</script>

<style scoped lang="scss">
.avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 30px 0 20px;
}

.cell {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	padding: 10px 0;
	border-bottom: 1px solid #f4f4f7;

	.cell-label {
		color: #666666;
		font-size: 13px;
		font-weight: 400;
		padding: 0 16px 0 13px;
	}

	.cell-input {
		flex: 1;
		height: 24px;
		color: #232832;
		text-align: right;
	}

	.cell-value {
		padding: 0 13px;
	}
}

.signature {
	padding: 10px;
	background-color: #ffffff;
}

.textarea {
	width: 100%;
	height: 100px;
	color: #232832;
	font-size: 15px;
	line-height: 18px;
}
.btn {
	position: fixed;
	left: 0;
	width: 100%;
	padding: 9px 0;
	background-color: #6e86ff;
	color: #ffffff;
	text-align: center;
	letter-spacing: 4px;
}
</style>
